<template>
    <div>
        <h1>门店修改</h1>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>门店名称</td>
                    <td><input type="text" v-model="info.shopname" /></td>
                </tr>
                <tr>
                    <td>开始时间</td>
                    <td><input type="date" v-model="info.beginTime" /></td>
                </tr>
                <tr>
                    <td>结束时间</td>
                    <td><input type="date" v-model="info.endTime" /></td>
                </tr>
                <tr>
                    <td>服务范围</td>
                    <td><input type="text" v-model="info.serviceRange" /></td>
                </tr>
                <tr>
                    <td>店主</td>
                    <td><input type="text" v-model="info.shopkeeper" /></td>
                </tr>
                <tr>
                    <td>联系电话</td>
                    <td><input type="text" v-model="info.phone" /></td>
                </tr>
                <tr>
                    <td>介绍</td>
                    <td><input type="text" v-model="info.desc" /></td>
                </tr>
                <tr>
                    <td>地址</td>
                    <td><input type="text" v-model="info.address" /></td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                        <input type="radio" v-model="info.state" :value="1" name="state" />是
                        <input type="radio" v-model="info.state":value="0" name="state" />否
                    </td>
                </tr>
                <tr>
                    <td align="right">门店logo</td>
                    <td><input type="file" @change="getlogo" />
                        <img :src="info.logo" alt="" width="100" height="100" >
                    </td>
                </tr>
                <tr>
                    <td>图片</td>
                    <td><input type="file" @change="getphoto" />
                        <img :src="info.photo" alt="" width="100" height="100" >
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="修改" class="btn btn-success" @click="ok
                        " /></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">

import { onMounted,reactive,ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios'
const route=useRoute();
const router=useRouter();

let info=reactive({
    id:route.query.id,
    shopname:'',
    beginTime:'',
    endTime:'',
    serviceRange:'',
    shopkeeper:'',
    phone:'',
    desc:'',
    address:'',
    state:1,
    logo:'',
    photo:''
})
//门店logo图片上传
const getlogo=(e:any)=>{
    let file=e.target.files[0];
    let formdata=new FormData();
    formdata.append("file",file);
    axios({
        url:'/api/Imgurl/GetImgurl',
        method:'post',
        data:formdata
    })
    .then(res=>{
        console.log(res);
        info.logo=res.data;
    })
}
//图片上传
const getphoto=(e:any)=>{
    let file=e.target.files[0];
    let formdata=new FormData();
    formdata.append("file",file);
    axios({
        url:'/api/Imgurl/GetImgurl',
        method:'post',
        data:formdata
    })
    .then(res=>{
        console.log(res);
        info.photo=res.data;
    })
}
//钩子函数
onMounted(()=>{
    FanTian();
})
//反填
const FanTian=()=>{
    axios({
        url:'/api/Shop/FanTian',
        method:'get',
        params:{
            id:route.query.id
        }
    })
    .then(res=>{
        console.log(res);
        info.shopname=res.data.shopname;
        info.beginTime=res.data.beginTime;
        info.endTime=res.data.endTime;
        info.serviceRange=res.data.serviceRange;
        info.shopkeeper=res.data.shopkeeper;
        info.phone=res.data.phone;
        info.desc=res.data.desc;
        info.address=res.data.address;
        info.state=res.data.state;
        info.logo=res.data.logo;
        info.photo=res.data.photo;
    })
}

//修改
const ok=()=>{
    axios({
        url:'/api/Shop/XUpdate',
        method:'put',
        data:info
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert('修改成功!');
            router.push('/ShopList');
        }
        else{
            alert('修改失败!');
        }
    })
}


</script>